<template>
  <div class="body">
    <div class="banner banMis">
      <mt-swipe :auto="4000" :continuous="true">
        <mt-swipe-item v-for="(item, index) in bannerList" :key="index">
          <a :href="item.link_url">
            <img :src="item.thumb" alt="" />
          </a>
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <div class="header" v-if="activeType == 1">
      <div>
        <ol>
          <li
            :style="{
              left: jindu(
                Math.floor(
                  (activeData.activity_end_num / activeData.activity_all_num) *
                    100
                )
              ),
            }"
          ></li>
        </ol>
        <dl>
          <dd>
            <h1>
              {{ activeData.activity_name
              }}<span
                >{{
                  Math.floor(
                    (activeData.activity_end_num /
                      activeData.activity_all_num) *
                      100
                  )
                }}%</span
              >
            </h1>
            <h2>做活动任务得奖励</h2>
          </dd>
          <dt @click="loseActive(activeData.users_activity_id)">放弃活动</dt>
        </dl>
      </div>
      <p></p>
    </div>

    <div class="nav" ref="navBox">
      <div :class="{ navboxactive: navlistClass }">
        <ul>
          <li
            v-if="nomission"
            :class="{ active: icur === 2 }"
            @click="tabcheck(2)"
          >
            <h1>未完成任务</h1>
            <p></p>
          </li>
          <li :class="{ active: icur === 0 }" @click="tabcheck(0)">
            <h1>普通任务</h1>
            <p></p>
          </li>
          <li :class="{ active: icur === 1 }" @click="tabcheck(1)">
            <h1>会员任务</h1>
            <p></p>
          </li>
        </ul>
      </div>
    </div>

    <div class="swiperwrap" ref="swilperbox">
      <swiper :options="swiperOption" ref="mySwiper" v-if="swilperKey">
        <!-- slides -->
        <swiper-slide :indexer="2" v-if="nomission">
          <div ref="listBox" class="listbox">
            <img
              v-if="mislist.length <= 0"
              class="noneList"
              src="../../assets/img/gg_img_zanwu.png"
              alt=""
            />

            <div class="misbox" v-if="icur === 2">
              <dl
                @click="
                  $router.push({
                    path: '/steps',
                    query: { task_id: item.user_task_id, state: 0 },
                  })
                "
                v-for="(item, index) in mislist[0]"
                :key="index"
              >
                <dd>
                  <img
                    :src="item.thumbnail"
                    alt=""
                    @error="errorImage($event)"
                  />
                </dd>
                <dt>
                  <h1 class="ellipsis">{{ item.name }}</h1>
                  <h2>{{ item.intro }}</h2>
                  <h3>
                    <i>{{
                      item.complete_remark ? item.complete_remark : '抓紧时间哦'
                    }}</i>
                  </h3>
                  <span
                    >￥{{
                      item.is_vip === 1
                        ? item.vip_task_price
                        : item.task_price | money
                    }}</span
                  >
                </dt>
              </dl>
            </div>

            <div class="misbox" v-if="icur !== 2">
              <dl
                @click="
                  $router.push({ path: '/detial', query: { id: item.id } })
                "
                v-for="(item, index) in mislist[0]"
                :key="index"
              >
                <dd>
                  <img
                    :src="item.thumbnail"
                    alt=""
                    @error="errorImage($event)"
                  />
                </dd>
                <dt>
                  <h1 class="ellipsis">{{ item.name }}</h1>
                  <h2>{{ item.intro }}</h2>
                  <h3>
                    <i>{{
                      item.complete_remark ? item.complete_remark : '抓紧时间哦'
                    }}</i>
                  </h3>
                  <span
                    >￥{{
                      item.is_vip === 1
                        ? item.vip_task_price
                        : item.task_price | money
                    }}</span
                  >
                </dt>
              </dl>
            </div>
          </div>
          <h5 v-if="mislist[0].length > 10 && !listkey" @click="addMore()">
            加载更多
          </h5>
        </swiper-slide>
        <swiper-slide :indexer="0">
          <div ref="listBox" class="listbox">
            <img
              v-if="mislist.length <= 0"
              class="noneList"
              src="../../assets/img/gg_img_zanwu.png"
              alt=""
            />

            <div class="misbox" v-if="icur === 2">
              <dl
                @click="
                  $router.push({
                    path: '/steps',
                    query: { task_id: item.user_task_id, state: 0 },
                  })
                "
                v-for="(item, index) in mislist[1]"
                :key="index"
              >
                <dd>
                  <img
                    :src="item.thumbnail"
                    alt=""
                    @error="errorImage($event)"
                  />
                </dd>
                <dt>
                  <h1 class="ellipsis">{{ item.name }}</h1>
                  <h2>{{ item.intro }}</h2>
                  <h3>
                    <i>{{
                      item.complete_remark ? item.complete_remark : '抓紧时间哦'
                    }}</i>
                  </h3>
                  <span
                    >￥{{
                      item.is_vip === 1
                        ? item.vip_task_price
                        : item.task_price | money
                    }}</span
                  >
                </dt>
              </dl>
            </div>

            <div class="misbox" v-if="icur !== 2">
              <dl
                @click="
                  $router.push({ path: '/detial', query: { id: item.id } })
                "
                v-for="(item, index) in mislist[1]"
                :key="index"
              >
                <dd>
                  <img
                    :src="item.thumbnail"
                    alt=""
                    @error="errorImage($event)"
                  />
                </dd>
                <dt>
                  <h1 class="ellipsis">{{ item.name }}</h1>
                  <h2>{{ item.intro }}</h2>
                  <h3>
                    <i>{{
                      item.complete_remark ? item.complete_remark : '抓紧时间哦'
                    }}</i>
                  </h3>
                  <span
                    >￥{{
                      item.is_vip === 1
                        ? item.vip_task_price
                        : item.task_price | money
                    }}</span
                  >
                </dt>
              </dl>
            </div>
          </div>
          <h5 v-if="mislist[1].length > 10 && !listkey" @click="addMore()">
            加载更多
          </h5>
          <img
            v-if="mislist[1].length <= 0"
            class="noneList"
            src="../../assets/img/gg_img_zanwu.png"
            alt=""
          />
        </swiper-slide>
        <swiper-slide :indexer="1">
          <div ref="listBox" class="listbox">
            <img
              v-if="mislist.length <= 0"
              class="noneList"
              src="../../assets/img/gg_img_zanwu.png"
              alt=""
            />

            <div class="misbox" v-if="icur === 2">
              <dl
                @click="
                  $router.push({
                    path: '/steps',
                    query: { task_id: item.user_task_id, state: 0 },
                  })
                "
                v-for="(item, index) in mislist[2]"
                :key="index"
              >
                <dd>
                  <img
                    :src="item.thumbnail"
                    alt=""
                    @error="errorImage($event)"
                  />
                </dd>
                <dt>
                  <h1 class="ellipsis">{{ item.name }}</h1>
                  <h2>{{ item.intro }}</h2>
                  <h3>
                    <i>{{
                      item.complete_remark ? item.complete_remark : '抓紧时间哦'
                    }}</i>
                  </h3>
                  <span
                    >￥{{
                      item.is_vip === 1
                        ? item.vip_task_price
                        : item.task_price | money
                    }}</span
                  >
                </dt>
              </dl>
            </div>

            <div class="misbox" v-if="icur !== 2">
              <dl
                @click="
                  $router.push({ path: '/detial', query: { id: item.id } })
                "
                v-for="(item, index) in mislist[2]"
                :key="index"
              >
                <dd>
                  <img
                    :src="item.thumbnail"
                    alt=""
                    @error="errorImage($event)"
                  />
                </dd>
                <dt>
                  <h1 class="ellipsis">{{ item.name }}</h1>
                  <h2>{{ item.intro }}</h2>
                  <h3>
                    <i>{{
                      item.complete_remark ? item.complete_remark : '抓紧时间哦'
                    }}</i>
                  </h3>
                  <span
                    >￥{{
                      item.is_vip === 1
                        ? item.vip_task_price
                        : item.task_price | money
                    }}</span
                  >
                </dt>
              </dl>
            </div>
          </div>
          <img
            v-if="mislist[2].length <= 0"
            class="noneList"
            src="../../assets/img/gg_img_zanwu.png"
            alt=""
          />
          <h5 v-if="mislist[2].length > 10 && !listkey" @click="addMore()">
            加载更多
          </h5>
        </swiper-slide>
      </swiper>
    </div>

    <div class="btmBox" style="height: 2.2rem;"></div>

    <propos
      @propskey="propskey"
      @closeprops="closeprops"
      :openprops="propsstatus"
      msgtext="确定要放弃活动吗"
    ></propos>
  </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Indicator } from 'mint-ui';
import propos from '../../components/propos';
export default {
  name: '',
  data() {
    return {
      propsstatus: false,
      jin: 55,
      icur: 2,
      mislist: [[], [], []],
      bannerList: [],
      activeData: null,
      navlistClass: false,
      users_activity_id: '',
      listkey: false,
      nomission: true,
      swiperObj: null,
      swilperKey: false,
      activeType: 0,
      swiperOption: {
        // 参数选项,显示小点
        pagination: '.swiper-pagination',
        //循环
        loop: true,
        slide: 1,
        paginationClickable: true,
        spaceBetween: 25,
        on: {
          slideChangeTransitionEnd: () => {
            this.swiperObj = this.$refs.mySwiper.$swiper;
            let swiper = this.swiperObj;
            if (swiper) {
              let indexnum =
                swiper.slides[swiper.activeIndex].attributes.indexer.value;
              this.icur = parseInt(indexnum);
              this.listkey = false;
              this.$nextTick(() => {
                this.setSwilperheight(swiper, indexnum);
              });
            }
          },
        },
      },
    };
  },
  components: {
    propos,
  },
  computed: {},
  created() {},
  mounted() {
    this.swilperKey = false;
    if (!localStorage.getItem('userinfo')) {
      sessionStorage.icur = 0;
      this.icur = 0;
      this.nomission = false;
      this.getmission(true);
      this.getBanner();
      this.activeType = 2;
    } else {
      //获取活动信息
      this.getActiveinfo();
      axiosPost(
        'index/task_list',
        {
          select_type: 2,
        },
        (res) => {
          if (res.code === -2) {
            localStorage.removeItem('userinfo');
            Toast({
              message: '登录过期，请重新登录',
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push('/login');
            }, 1500);
            return;
          }
          //console.log(res)
          if (res.code != 1) {
            sessionStorage.icur = 0;
            this.icur = 0;
            this.mislist[0] = [];
            this.nomission = false;
          } else {
            this.nomission = true;
            this.mislist[0] = [];
            for (let index in res.data) {
              this.mislist[0].push(res.data[index]);
            }
          }
          this.getmission();

          this.getBanner();
        }
      );
    }
    window.addEventListener('scroll', this.handleScroll, true);
  },
  methods: {
    //计算当前swilper高度
    setSwilperheight(swiper) {
      let len =
        swiper.slides[swiper.activeIndex].children[0].children[0].children
          .length;
      let addmorelen = 0;
      if (len > 10) {
        len = 10;
        addmorelen = this.rem() * 0.9;
      }
      console.log(
        swiper.slides[swiper.activeIndex].children[0].children[0].children[0]
          .offsetHeight
      );
      let length =
        swiper.slides[swiper.activeIndex].children[0].children[0].children[0]
          .offsetHeight *
          len +
        this.rem() * 0.3 * len +
        this.rem() * 0.2 * len;
      this.$refs.swilperbox.style.height = length + addmorelen + 'px';
      this.$refs.mySwiper.$el.style.height = length + addmorelen + 'px';
      swiper.slides[swiper.activeIndex].style.height = length + 'px';
      swiper.slides[swiper.activeIndex].children[0].style.height =
        length + 'px';
      swiper.slides[swiper.activeIndex].children[0].children[0].style.height =
        length + 'px';
    },
    //放弃任务
    propskey() {
      this.propsstatus = true;
      axiosPost(
        'users/give_up_activity',
        {
          users_activity_id: this.users_activity_id,
        },
        (res) => {
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.propsstatus = false;
          Toast({
            message: '活动放弃成功',
            duration: 1000,
          });
          this.activeType = 0;
        }
      );
    },
    //关闭放弃任务弹窗
    closeprops(key) {
      this.propsstatus = key;
    },
    //打开放弃任务弹窗
    loseActive(users_activity_id) {
      this.propsstatus = true;
      this.users_activity_id = users_activity_id;
    },
    //任务进度条计算
    jindu(jin) {
      return -(1.07 - (1.07 / 100) * jin) + 'rem';
    },
    //获取活动内容
    getActiveinfo() {
      axiosPost('about/get_recivew_activity', {}, (res) => {
        if (res.code !== 0) {
          return Toast({
            message: res.msg,
            duration: 1000,
          });
        }
        this.activeType = res.data.is_hidden;
        this.activeData = res.data;
      });
    },
    //加载更多
    addMore() {
      this.listkey = !this.listkey;
      let swiper = this.$refs.mySwiper;
      this.$refs.swilperbox.style.height = 'auto';
      this.$refs.mySwiper.$el.style.height = 'auto';
      if (swiper.$swiper) {
        for (let i = 0; i < swiper.$swiper.slides.length; i++) {
          swiper.$swiper.slides[swiper.$swiper.activeIndex].style.height =
            'auto';
          swiper.$swiper.slides[
            swiper.$swiper.activeIndex
          ].children[0].style.height = 'auto';
          swiper.$swiper.slides[
            swiper.$swiper.activeIndex
          ].children[0].children[0].style.height = 'auto';
        }
      }
    },
    //根据关东高度控制导航条定位
    handleScroll() {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      if (top > this.$refs.navBox.offsetTop) {
        this.navlistClass = true;
      } else {
        this.navlistClass = false;
      }
    },
    //任务列表切换
    tabcheck(num) {
      this.icur = num;
      sessionStorage.icur = num;
      this.listkey = false;
      this.$refs.listBox.style.height = 'auto';
      this.$refs.mySwiper.$swiper.slideTo(this.getSiderIndex(num), 400, false);
      this.setSwilperheight(this.$refs.mySwiper.$swiper);
    },
    //换取相应的索引
    getSiderIndex(num) {
      let indexnum = 0;
      if (this.$refs.mySwiper.$swiper.slides.length == 5) {
        switch (num) {
          case 2:
            indexnum = 1;
            break;
          case 0:
            indexnum = 2;
            break;
          case 1:
            indexnum = 3;
            break;
          default:
            break;
        }
      } else {
        switch (num) {
          case 2:
            indexnum = 1;
            break;
          case 0:
            indexnum = 1;
            break;
          case 1:
            indexnum = 2;
            break;
          default:
            break;
        }
      }
      return indexnum;
    },
    //获取任务列表
    getmission() {
      axiosPost(
        'index/task_list',
        {
          select_type: 0,
        },
        (res) => {
          axiosPost(
            'index/task_list',
            {
              select_type: 1,
            },
            (res) => {
              this.swilperKey = true;

              if (res.code !== 1) {
                this.mislist[2] = [];
                Indicator.close();
                return;
              }

              this.mislist[2] = [];
              for (let index in res.data) {
                this.mislist[2].push(res.data[index]);
              }

              setTimeout(() => {
                let swiper = this.$refs.mySwiper;
                if (swiper.$swiper) {
                  this.setSwilperheight(swiper.$swiper);
                  this.$refs.mySwiper.$swiper.slideTo(1, 400, false);
                }
              }, 200);
            }
          );

          if (res.code !== 1) {
            this.mislist[1] = [];
            Indicator.close();
            return;
          }
          this.mislist[1] = [];
          for (let index in res.data) {
            this.mislist[1].push(res.data[index]);
          }
        }
      );
    },
    //获取轮播图
    getBanner() {
      axiosPost(
        'slideprojector/index',
        {
          type: 2,
        },
        (res) => {
          //console.log(res)
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.bannerList = res.data;
        }
      );
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, true);
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
@import '../../style/indexlist';

.body {
  background: @color4;
}

body #app .body .listActive {
  max-height: initial;
}

.banner {
  padding: 0.4rem 0.4rem 0 0.4rem;
  height: 1.8rem;

  img {
    height: 1.8rem;
  }
}

.swiperwrap {
  overflow: hidden;
}

.header {
  padding: 0 0.4rem;
  height: 1.4rem;
  margin-top: 0.4rem;

  ol {
    width: 1.07rem;
    height: 0.08rem;
    background: rgba(255, 234, 227, 1);
    border-radius: 0.04rem;
    position: relative;
    overflow: hidden;

    li {
      width: 1.07rem;
      height: 0.08rem;
      background: rgba(255, 70, 45, 1);
      border-radius: 0.04rem;
      position: absolute;
      left: -0.5rem;
      top: 0;
    }
  }

  dl {
    overflow: hidden;

    dd {
      float: left;
      width: calc(100% - 1.56rem);

      h1 {
        font-size: @font34;
        font-weight: 500;
        color: @color3;
        padding: 0.1rem 0;

        span {
          color: @color1;
        }
      }

      h2 {
        font-size: 0.24rem;
        font-weight: 400;
        color: rgba(170, 170, 170, 1);
      }
    }

    dt {
      width: 1.56rem;
      padding: 0.08rem 0;
      line-height: normal;
      background: @color1;
      border-radius: 0.26rem;
      text-align: center;
      font-size: @font28;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      float: right;
      margin-top: 0.2rem;
      /*display: table;*/
      /*i{*/
      /*    display: table-cell;*/
      /*    vertical-align: middle;*/
      /*}*/
    }
  }

  p {
    margin-top: 0.3rem;
    border-bottom: 1px solid #efefef7a;
  }
}

.nav {
  height: 1.1rem;

  .navboxactive {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
  }

  div {
    height: 1.1rem;
    width: 100%;
    background: @color4;

    ul {
      overflow: hidden;
      margin: 0 0.4rem;

      .active {
        h1 {
          font-size: 0.4rem;
          color: @color3;
        }

        p {
          display: block;
        }
      }

      li {
        float: left;
        color: @color2;
        margin-right: 0.4rem;

        h1 {
          line-height: 1.1rem;
          font-size: @font32;
          font-weight: 400;
          height: 0.9rem;
          overflow: hidden;
        }

        p {
          width: 0.42rem;
          height: 0.06rem;
          background: rgba(42, 43, 63, 1);
          margin: 0 auto;
          display: none;
        }
      }
    }
  }
}

.listbox {
  overflow: hidden;

  .misbox {
    margin-top: 0;

    dl {
      margin-top: 0;
      margin-bottom: 0.3rem;
    }
  }
}

h5 {
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  color: @color2;
  font-size: @font28;
  padding: 0.2rem;
}
</style>
